<template>
  <div class="delivery-search-table">
    <a-table
      :columns="columns"
      :data-source="data"
      size="small"
      class="table"
      :pagination="pagination"
      :scroll="{ x: 1700 , y: 500}">
      <span slot="id" slot-scope="text, record" style="display: flex; justify-content: space-between; align-items: center;">
        {{text}}
        <a-icon v-if="record.paid" type="check-circle" style="color: hsl(210, 100%, 50%)" />
      </span>
      <div slot="operation" slot-scope="text, record">
        <a-button size="small" @click="modifyDelivery(record)">
          查看
        </a-button>
        <a-button size="small" v-if="!record.reviewed" type="primary" @click="reviewOrder(record)" style="margin-left: 12px; ">
          审核
        </a-button>
        <a-button size="small" class="yellow-btn" v-else type="primary" @click="unreviewOrder(record)" style="margin-left: 12px;">
          复审
        </a-button>
        <span v-if="record.paid" class="paid"></span>
      </div>
    </a-table>
  </div>
</template>

<script>
import {
  deliverySearchColumns
} from './init/tableInit';

import {
  divide3Float3Fixed
} from '@/utils/NumberChange';

import {
  dateNumFormat,
  generateFilters,
  getNameById
} from '@/utils/commonFunc';

import {
  deliveryReviewReq,
  deliveryUnreviewReq
} from '@/requests/deliveryRequests';

export default {
  name: "DeliverySearchTable",
  props: {

  },
  data() {
    return {
      data: [],
      columns: deliverySearchColumns,
      pagination: {
        pageSize: 50,//每页中显示20条数据
        showSizeChanger: true,
        pageSizeOptions: ["10", "20", "50", "100"],//每页中显示的数据
        showTotal: total => `共有 ${total} 条送货单`,  //分页中显示总的数据
      }
    };
  },
  computed: {

  },
  mounted() {
    this.updateDeliveries();
    
  },
  watch: {
    '$store.state.deliveriesCache' () {
      this.updateDeliveries();
    }
  },
  methods: {
    modifyDelivery(record) {
      this.$router.push({
        name: 'DeliveryCheck',
        params: {
          id: record.key
        },
      })
    },
    /**
     * 审核订单
     * @param record 订单行内容
     */
    reviewOrder(record) {
      // 向后端提出审核订单请求
      const id = record.key;
      const loaded = this.$message.loading('正在审核订单，请勿重复点击审核', 0);
      deliveryReviewReq(id).then((res) => {
        loaded();
        // 审核成功后，返回空气

        // 通知父组件刷新该页面
        this.$emit('review', id);

        this.$notification['success']({
          message: '审核送货单',
          description:
            `审核送货单成功，送货单ID ${id}`,
        });
        // 更新缓存
        this.$store.commit('updateDeliveriesCache');
      }).catch((err) => {
        loaded();
        this.$notification['error']({
          message: '审核送货单',
          description:
            `审核送货单失败，失败信息 ${err.response.data.message}`,
        });
      })
    },
    /**
     * 取消审核订单
     * @param record 订单行内容
     */
    unreviewOrder(record) {
      // 向后端提出取消审核订单请求
      const id = record.key;
      const loaded = this.$message.loading('正在取消审核订单，请勿重复点击复审', 0);
      deliveryUnreviewReq(id).then((res) => {
        loaded();
        // 审核成功后，返回空气

        // 通知父组件刷新该页面
        this.$emit('review', id);

        this.$notification['success']({
          message: '取消审核送货单',
          description:
            `取消审核送货单成功，送货单ID ${id}`,
        });
        // 更新缓存
        this.$store.commit('updateDeliveriesCache');
      }).catch((err) => {
        loaded();
        this.$notification['error']({
          message: '取消审核送货单',
          description:
            `取消审核送货单失败，失败信息 ${err.response.data.message}`,
        });
      })
    },

    /**
     * 更新deliveries，数据更新或第一次加载
     */
    setReviewedItem() {
      const nodes = document.getElementsByClassName("paid").parentNode;
    },
    updateDeliveries() {
      const deliveries = this.$store.state.deliveriesCache;
      this.data = deliveries.map((value) => {
        const delivery  = Object.assign({}, value);
        delivery.key = delivery.id;
        delivery.deliveryDate = dateNumFormat(delivery.deliveryDate);
        delivery.totalAmount = divide3Float3Fixed(delivery.totalAmount);
        delivery.clientId = getNameById(this.$store.state.clientsCache, delivery.clientId);
        return delivery;
      });
      this.columns[0].filters = generateFilters(this.data, 'clientId');
      this.setReviewedItem();
    },
    
  },
  components: {

  },
};
</script>

<style scoped lang="scss">
.delivery-search-table {
  >.table {
    width: calc(100vw - 350px);
  }

  .paid {
    background: crimson;
  }
}
</style>

<style lang="scss">
.delivery-search-table {
  >.table {
    
    .ant-table-header {
      min-width: auto !important;
    }

    .ant-table-row:hover {
      cursor: pointer;
    }
  }
}
</style>
